<template>
  <div class="app-container commercial-content">
    <!-- <EzForm
      ref="menuForm"
      :formMap="formMap"
      v-model="formData"
      @search="searchRequest"
    ></EzForm> -->
    <BtnGroup ref="btnGroup" :btns="btns" @handle="handleBtnGroup" />
    <!-- 工具栏 end-->

    <div>
      <el-table
        v-loading="loading"
        ref="table"
        :key="randomKey"
        :data="lists"
        :height="st"
        lazy
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->

        <el-table-column label="日期" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.order_day }}</span>
          </template>
        </el-table-column>
        <el-table-column label="未发货订单数量" width="220">
          <template slot-scope="scope">
            <span>{{ scope.row.order_count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最少需要发货单数量" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.user_order_count }}</span>
          </template>
        </el-table-column>
        
            
        <el-table-column label="操作">
          <template slot-scope="scope">
            
            <el-button size="small" type="primary" @click="handleOrderShipping(scope.row.order_day)"   
            v-auth="'/admin/order/orderShipping'"
              >匹配发货单
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        ref="paginationTotal"
        :page="currentPage"
        :total="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      />
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      randomKey: Math.random(),
      formMap: [
        
        // {
        //   label: "",
        //   key: "selectmonth",
        //   type: "selectmonth",
        // },
      ],
      btns: [
      ],
      formData: {      
        selectmonth: "",
      },
      orderForm: {
        id: '',
        user_id: '',
        payment_content: '',
      },
      lists: [],
      dialogloading: true,
      loading: false,

      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      total: 0,
      // 个数选择器（可修改）
      pageSizes: [100],
      // 默认每页显示的条数（可修改）
      pageSize: 100,

      st: 0,
      dialogVisible: false,
      dialogCancelVisible:false,
      diaAddress: false,
      dialogTitle: "创建",
      isEdit: false,
      choosePlace: [],
      dictList: [],
      place: [],
      country: [],

      // 验证表单
      rules: {
        
      },
    };
  },
  watch: {
    formData: {
      handler(newName, oldName) {

        // ...
      },
      deep: true,
    },
  },
  created() {
    this.handleRequest();
    // this.handleDict();
  },
  mounted() {
    const that = this;
    that.$util.autoHeight(that, that.$refs.table.$el);
  },
  methods: {
    alterData(row, column) {
      row.isShow = false;
      this.refreshTable();
    },
    refreshTable() {
      this.randomKey = Math.random();
    },

    /**
     * 头部按钮列表
     */
    handleBtnGroup(evt) {
      let { handle } = evt;
      switch (handle) {
        case "search":
          this.handleRequest();
          break;      
        default:
          break;
      }
    },
    
    /**
     * 字典项目
     */
     async handleDict(that) {
      const { result } = await this.$.order.dict();
      this.formMap[2].options = result['order_state'];
      this.dictList = result;
    },
    /**
     * 关闭对话框
     */
    modalClose() {
      this.dialogVisible = false;
      this.dialogCancelVisible = false;
      this.diaAddress = false;
    },

    /**
     *  搜索
     */
    handleSearch(statu) {
      this.currentPage = 1;
      this.handleRequest();
    },
    searchRequest() {
      this.currentPage = 1;
      this.handleRequest();
    },
    /**
     * 弹框的行更改
     */
    rowChange(e) {
      console.log(e);
    },
    sizeChange(e) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = e;
      that.handleRequest();
    },
    currentChange(e) {
      this.currentPage = e;
      this.handleRequest();
    },
    /**
     * 请求列表
     */
    async handleRequest() {
      const that = this;

      const {
        currentPage,
        pageSize,
        created_at,

        formData,
      } = that;
      let o = {
        page_size: pageSize,
        page: currentPage,
      };


      that.$util.ext(that.formData, o);
      console.log("that.formData", that.formData);

      try {
        that.loading = true;
        const { result } = await that.$.order.unshipping(that.formData);
        that.total = result.pagination.total_count;
        that.$refs.table.bodyWrapper.scrollTop = 0;
        result.list.map((item, index) => {
          item.index = index;
          item.isShow = false;
        });
        that.lists = result.list;
        console.log("list", that.lists);
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },

    handleSelect() {
      this.currentPage = 1;
      this.handleRequest();
    },
    
    handleOrderShipping(date) {
      let that = this; 

      //请求接口
      async function doAction(date) {
        try {        
          that.loading = true;
          that.dialogloading = true;
          const { result } = await that.$.order.orderShipping({
            date: date
          });
          that.loading = false;
          that.dialogloading = false;
          that.dialogVisible = false;
          that.handleSearch();
          that.$message({ type: "success", message: "提交成功" });
        } catch (e) {
          that.loading = false;
          that.dialogloading = false;
          that.dialogVisible = false;
        }
      }
      this.$confirm("确定匹配该日期发货单?", "匹配发货单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          doAction(date);
        })
        .catch(() => {
          //取消的提示
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.inp1 {
  flex: 1;
  margin-right: 12px;
}

.supname {
  margin: -18px 0 0 12px;
}

.label {
  font-size: 13px;
  margin-right: 5px;
}
</style>
<style>
/* .add-dialog .el-form-item__content {
  display: flex;
  align-items: center;
} */
.add-dialog .edit-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  padding-top: 2px;
  top: 100%;
  left: 0;
}
.add-dialog .dev-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  top: 100%;
  left: 0;
}
.add-dialog .copy-btn {
  margin-left: 24px;
}
</style>